<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${session.user.userName}+'的个人空间-浮生若梦'"></title>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
          type="text/css">
    <link href="http://cdn.bootcss.com/highlight.js/9.8.0/styles/github-gist.min.css" rel="stylesheet" type="text/css">
    <link href="css/pageCss.css" rel="stylesheet" type="text/css">
</head>
<style>
    body {
        width: 100%;
        height: 100%;
        position: absolute;

        left: 0px;
        top: 0px;
        background-image: url("img/chengshixiyang.png");
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>
<body ondragstart="return false">
<div th:replace="part/nav :: nav"></div>
<div id="top" class="container" style="margin-top: 4%;">
    <div class="col-md-4" id="right">
        <div style="position: fixed;width: 23%">
            <div class="bg" style="border-radius: 3%; word-wrap: break-word;">
                <div align="center" th:if="${session.user==null}"><h3>错误</h3></div>
                <div th:if="${session.user!=null}">
                    <div class="panel panel-default">
                        <div class="panel-heading">个人信息：</div>
                    </div>
                    <table width="100%" style="table-layout:fixed;margin-left: 3%;">
                        <!--${session.user.userImage}-->
                        <tr>
                            <td rowspan="4"><img th:src="${session.user.userImage}" width="100px" height="100px"
                                                 style="object-fit: cover;"/></td>
                            <td style="width: 80%" align="center" th:text="'uid：'+${session.user.userId}">uid：*</td>
                        </tr>
                        <tr>
                            <td style=" overflow:hidden;white-space:nowramp;text-overflow:ellipsis;" align="center"
                                th:text="${session.user.userName}">一生所爱
                            </td>
                        </tr>
                        <tr>
                            <td align="center"
                                th:text="${session.user.userGender==1?'♂':(session.user.userGender==0?'♀':'未知')}">男
                            </td>
                        </tr>
                        <tr>
                            <td align="center" th:text="${session.user.userBirthday}">2000-1-1</td>
                        </tr>
                        <!--<tr>-->
                        <!--    <td colspan="2" style="padding-top: 3%;"><p align="center">guanzhu</p></td>-->
                        <!--</tr>-->
                    </table>
                    <div class="panel panel-default">
                        <div class="panel-heading">我的留言：</div>
                        <div class="panel-body" th:text="${session.user.userDetail}">作者留言</div>
                    </div>
                </div>
            </div>
            <div class="bg" style="word-wrap: break-word;">
                <div align="center"><h3>工具</h3></div>
                <div align="center">
                    <a class="btn btn-info" id="edit">编辑信息</a>
                    <a class="btn btn-info" id="back">返回</a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div th:each="post:${pageInfo.list}">
            <!--4个字的标签展示5个-->
            <!--5个字的标签展示4个-->
            <!--6个字的标签展示3个-->
            <div class="bg">
                <div class="mr-top list-inline">
                    <div align="left" class="two" style="width: 35%">
                        <span th:each="label:${post.post.labels}" th:text="${label.label}" class="label label-info"
                              style="margin-right: 1%;cursor: pointer">标签标签标签</span>
                    </div>
                    <div align="right" class="two" style="width: 65%">
                        <span class="label label-success" th:text="'作者：'+${post.user.userName}">作者：阿汐</span>
                        <span class="label label-default" th:text="'时间：'+${post.post.postTime}">2020年7月27日</span>
                        <span class="label label-default" th:text="'评论：'+${post.post.postComment}">评论：24</span>
                        <span class="label label-default" th:text="'点赞：'+${post.post.postLike}">点赞：10</span>
                        <span class="label label-default" th:text="'收藏：'+${post.post.postCollection}">收藏：50</span>
                    </div>
                </div>
                <div class="mr-top" style="margin-top: 3.8%;cursor: pointer" th:onclick="'skip('+${post.post.postId}+')'">
                    <div style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"
                         th:text="${post.post.postTitle}"></div>
                    <div style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"
                         th:text="${post.post.postDetail}"></div>
                </div>
            </div>
        </div>
        <!--<div style="opacity: 0.7;" align="center">
            <nav>
                &lt;!&ndash;pageInfo.pages-4>=pageInfo.pageNum?&ndash;&gt;
                &lt;!&ndash;分页&ndash;&gt;
                <ul class="pager">
                    <li class="previous" th:classappend="${pageInfo.hasPreviousPage?'':'disabled'}"><a
                            style="color: black;" th:styleappend="${pageInfo.hasPreviousPage?'cursor: pointer;':''}"
                            th:onclick="'hasPre('+${pageInfo.hasPreviousPage}+','+${pageInfo.prePage}+')'"><label
                            class="glyphicon glyphicon-arrow-left"></label>&nbsp;上一页</a></li>
                    <li th:each="num:${#numbers.sequence(pageInfo.pageNum-4>0?pageInfo.pageNum+4>pageInfo.pages?pageInfo.pages-8:pageInfo.pageNum-4:1,pageInfo.pages-pageInfo.pageNum>4?pageInfo.pageNum-4<=0?9:pageInfo.pageNum+4:pageInfo.pages)}">
                        <a style="color: black;"
                           th:styleappend="${num==pageInfo.pageNum?'background-color: #449d44':''}" th:text="${num}"
                           th:href="${'/browseList.htm?num='+num}"></a></li>
                    <li class="next" th:classappend="${pageInfo.hasNextPage?'':'disabled'}"><a style="color: black;"
                                                                                               th:styleappend="${pageInfo.hasNextPage?'cursor: pointer;':''}"
                                                                                               th:onclick="'hasNext('+${pageInfo.hasNextPage}+','+${pageInfo.nextPage}+')'">下一页&nbsp;<label
                            class="glyphicon glyphicon-arrow-right"></label></a></li>
                </ul>
            </nav>
        </div>-->
        <!--分页-->
        <div th:replace="part/paging :: paging"></div>
    </div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/highlight.js/9.8.0/highlight.min.js"></script>
<script src="js/paging.js"></script>
<script>
    $(document).ready(function () {
        //获取当前页面路径
        $("#recentUrl").val(window.location.href);
    });

    $("#back").click(function () {
        window.history.back()
    });

    $("#edit").click(function () {
        window.location.href="/editInformation.htm"
    });

    //通过内容id跳转
    function skip(id) {
        window.location.href = "/browsePost.htm?id=" + id;
    }
</script>
</body>
</html>